<template>
	<div>		
		<header class="header">
			<a-form class="formList" layout="inline">
				<a-form-item label="分类">
					<a-select v-model:value="queryParams.category_id" placeholder="文章类别">
						<a-select-option value="">全部分类</a-select-option>
						<a-select-option v-for="(item,index) in allResourcesData" :key="index" :value="item.id">
							{{item.name}}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="文章名称">
					<a-input v-model:value="queryParams.title"></a-input>
				</a-form-item>
				<a-form-item>
					<a-button @click="serchButton">查询</a-button>
				</a-form-item>
				<a-form-item class="onSherch" :wrapper-col="{ span: 14, offset: 4 }">
					<a-button type="primary" @click="sureData">发布文章</a-button>
				</a-form-item>
			</a-form>
		</header>
		<!--表格操作项目-->
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>封面</th>
					<th>所属类别</th>
					<th>文章标题</th>
					<th>摘要</th>
					<th>阅读量</th>
					<th>是否显示</th>
					<th>操作</th>
				</tr>
			</tbody>
			<tbody>
				<tr v-for="(item,index) in articleData" :key="index">
					<td>
						<img style="width: 40px;height: 40px" :src="item.cover" alt="">
					</td>
					<td>{{ item?.ArticleCategory?.name }}</td>
					<td>{{ item.title }}</td>
					<td>
						<span class="text-ellipsis" :title="item.describe">{{ item.describe }}</span>
					</td>
					<td>{{ item.read_num }}</td>
					<td>
						{{ item.show == 1 ? "显示" : "不显示" }}
					</td>
					<td>
						<a-button type="primary" size="small" danger @click="areticleDel(item)">删除</a-button>
						<a-button type="primary" size="small" class="m-l-10" @click="articleChange(item)">修改</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 分页 -->
		<div class="padding-t-20">
			<a-pagination :pageSize="queryParams.pageSize" :current="queryParams.page" :total="queryParams .count"
				@change="clickPage" :pageSizeOptions="pageSizeOptions" show-size-changer
				@showSizeChange="onShowSizeChange" show-quick-jumper />
		</div>
	</div>
</template>

<script>
	import apiArticl from '../../api/article.js'
	import {
		Modal
	} from 'ant-design-vue';
	import apiUser from "../../api/resource";
	export default {
		components: {},
		data() {
			return {
				allResourcesData: '',
				articleData: '',
				queryParams: {
					category_id: '',
					title: '',
					count: '',
					page: 1,
					pageSize: 20
				},
			}
		},
		mounted() {
			this.getArticList();
			this.articleDataList()
		},
		methods: {
			/*打开面板*/
			addKefu() {
				this.$refs.alts.addOpen();
			},
			// 获取数据
			getArticList() {
				this.serchButton()
			},
			// 获取文章分类数据
			articleDataList() {
				apiArticl.getCategorys().then((res) => {
					this.allResourcesData = res.result
				})
			},
			// 添加
			sureData() {
				this.$router.push({
					path: '/article/contentChild'
				})
			},
			// 修改
			articleChange(item) {
				this.$router.push({
					path: '/article/contentChild',
					query: {
						id: item.id
					}
				});
			},
			// 删除
			areticleDel(item) {
				let T = this
				Modal.confirm({
					title: () => '确定删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						apiArticl.articleListDel({
							id: item.id
						}).then((res) => {
							if (res.status === 1) {
								T.$message.success("删除成功");
								T.getArticList()
							}
						})
					},
				});
			},
			serchButton() {
				apiArticl.getartList(
					this.queryParams.category_id,
					this.queryParams.title,
					this.queryParams.page,
					this.queryParams.pageSize
				).then((res) => {
					this.articleData = res.result.data;
					this.queryParams.count = res.result.count;
				})
			}
		},
	}
</script>

<style scoped>
	.button {
		display: flex;
		justify-content: right;
	}

	:deep(.ant-form-item .ant-select,
	.ant-form-item .ant-cascader-picker ){
		/* width: 100%; */
		width: 188px;
	}
</style>
